<article class="component active" id="swiper" data-url='swiper'>
  <h2 class="component-title">Swiper</h2>
  <p class="component-description">You must include these to file after <code>light7.js</code> and <code>light7.css</code> to use Swiper:</p>


{% highlight html %}
<link rel="stylesheet" href="css/light7-swiper.min.css">
<script type='text/javascript' src='{{ site.version }}/js/light7-swiper.min.js' charset='utf-8'></script>
{% endhighlight %}

<p>The swiper will auto be init when <code>$.init</code> is called. If you create a Swiper after that, call <code>$(".swiper-container").swiper(config)</code> to init.</p>

{% highlight html %}
<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
    <div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
    <div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
  </div>
</div>
{% endhighlight %}
</article>

  <h3>Config</h3>

  <p>You can add <code>data-xxx</code> on <code>.swiper-container</code> to config it, also, you can pass a config object in <code>$().swiper(config)</code>, For more config See <a href='http://www.idangero.us/swiper/api/#.VjtIEK4rLyU' target="_blank">Swiper</a></p>
